{% block content %}

<div id="menu-toolbar" class="ui-state-active">
    <ul class ="right">
    </ul>
    <ul class ="left">
        <li><a href="/iterations?project_id={{ project_backlog.get_project.key.id }}" class="pbk_link">{{ project_backlog.get_project.name }}</a></li>
        <li><span id="id_add_story" val="{{project_backlog.key.id}}" title="Add new task"class="cursor_pointer">Add Task</span></li>
    </ul>
</div>

<div id ="title-container">
    <h2>{{ project_backlog.get_project.name }} - Backlog</h2>
</div>

<div id="table-contain" class="ui-widget">
    <table class="ui-widget ui-widget-content">
        <col width="20%" />
        <col width="10%" />
        <col width="10%" />
        <col width="10%" />
        <col width="13%" />
        <col width="13%" />
        <col width="15%" />
        <thead>
            <tr class="ui-widget-header" >
                <th>Name</th>
                <th>Status</th>
                <th>Category</th>
                <th>Priority</th>
                <th>Opened By</th>
                <th>Assigned To</th>
                <th>Estimated Time</th>
            </tr>
        </thead>
        <tbody>
            {% for story in project_backlog.stories %}
            {% ifequal story.status "Closed" %}
            <tr class="task_done">
                {% else %}
            <tr>
                {% endifequal %}
                <td><a href="/story?id={{ story.key.id }}" class="pbk_link"> {{ story.name|escape }}</a></td>
                <td>{{ story.status }}</td>
                <td>{{ story.category }}</td>
                <td>{{ story.priority }}</td>
                <td>{{ story.opened_by }}</td>
                <td>{{ story.assigned_to }}</td>
                <td><div id="pb_{{ story.key.id }}" val="{{ story.percentage }}"></div></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div id="dialog_story_form" class="form_container tmp_dialog" title="Create new story">
</div>

<script type="text/javascript">
    $(document).ready(function(){
        update_progressbar = function (selector) {
            $(selector).each(function() {
                percentage = parseFloat($(this).attr('val'));
                $(this).progressbar({value:percentage});
            });
        };
        update_progressbar('div:[id^=pb_]');
        $( 'a.pbk_link' ).click( function( event ) {
            event.preventDefault();
            var url = $( this ).attr('href');
            loadContent( url );
        });
        $( "#dialog_story_form" ).dialog({
            autoOpen: false,
            height: 410,
            width: 600,
            modal: true,
            buttons: {
                "Save": function() {
                    var $form = $('#dialog_story_form form'),
                    url = $form.attr('action'),
                    data = $form.serialize() + '&response=story_row';
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                            if (data.result == 'ok') {
                                var html = $(data.html).html();
                                $( '#table-contain tbody' ).append(html);
                                update_progressbar('#pb_'+ data.id);
                                $( "#dialog_story_form" ).dialog( "close" );
                            } else {
                                var html = $(data.html).html();
                                $( '#dialog_story_form' ).empty();
                                $( '#dialog_story_form' ).append(html);
                            }
                        },
                        error: function (data) {
                            showErrorMsg(data);
                        }
                    });
                },
                Cancel: function() {
                    $( '#dialog_story_form' ).empty();
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                $( '#dialog_story_form' ).empty();
            }
        });
        $( "#id_add_story" ).click(function() {
            var id_iteration = $( this ).attr('val');
            var id_story = '';
            $.ajax({
                type: 'GET',
                url: '/reqajax/story_form',
                dataType: 'json',
                data: {'id': id_story, 'iteration_id': id_iteration},
                success: function(data) {
                     var html = $(data).html();
                     $( '#dialog_story_form' ).append(html);
                },
                error: function (data) {
                    showErrorMsg(data.responseText);
                }
            });
            $( "#dialog_story_form" ).dialog( "open" );
        });
    });
</script>

{% endblock %}
